<div class='input-group ml-2'>
  <div class='input-group-prepend'>
    <span class='input-group-text'><i class='fas fa-magnifying-glass'></i></span>
  </div>
  {% if App.devMode -%}
    <!-- [html-validate-disable-block input-missing-label, prefer-native-element, no-unused-disable: suppress errors from tom-select] -->
  {%- endif %}
  <select id='{{ categorySelectId|default('categorySelect') }}' aria-label='{{ 'Filter by category'|trans }}' class='form-control col-md-6'>
    <option value=''>{{ 'Filter by category'|trans }}</option>
    {% for category in bookableCategories %}
      <option value='{{ category.id }}'>{{ category.team_name }} - {{ category.title }}</option>
    {% endfor %}
  </select>
  {% if App.devMode -%}
    <!-- [html-validate-disable-block input-missing-label, prefer-native-element, no-unused-disable: suppress errors from tom-select] -->
  {%- endif %}
  {# minimal wrapper just for the resource select + its control input #}
  <div id='{{ itemSelectWrapperId|default('itemSelectWrapper') }}' class='input-group-append col-md-6 ml-n3'>
    <select hidden id='{{ itemSelectId|default('itemSelect') }}' name='items[]' aria-label='{{ 'Select a resource'|trans }}' class='form-control form-inline' multiple>
      <option value=''>{{ 'Select a resource'|trans }}</option>
      {% for item in itemsArr %}
        <option value='{{ item.id }}' data-category='{{ item.category }}' data-color='{{ item.category_color }}'>
          {{ item.category_title }} - {{ item.title }}
        </option>
      {% endfor %}
    </select>
    {# external control input that clears when an item is selected #}
    <input type='text' id='{{ itemSelectInputId|default('itemSelectInput') }}' class='form-control' autocomplete='off' placeholder='{{ 'Select a resource'|trans }}'>
  </div>
</div>
